16 tháng 8, 2025Tiếng Việt

Khám phá Next.js Parallel Routes: Hướng dẫn toàn diện để xây dựng bố cục trang linh hoạt, động với nhiều phần độc lập. Tìm hiểu cách triển khai, lợi ích và các phương pháp hay nhất.

Next.js Parallel Routes: Xây Dựng Bố Cục Trang Động

Next.js, một framework React hàng đầu, không ngừng phát triển để cung cấp cho các nhà phát triển những công cụ mạnh mẽ để xây dựng các ứng dụng web hiện đại. Một trong những tính năng thú vị nhất được giới thiệu trong các phiên bản gần đây là Parallel Routes (Định tuyến song song). Tính năng này cho phép bạn hiển thị nhiều phần độc lập trong cùng một bố cục trang, mang lại sự linh hoạt và kiểm soát chưa từng có đối với cấu trúc và trải nghiệm người dùng của ứng dụng.

Parallel Routes là gì?

Theo truyền thống, một route trong Next.js tương ứng với một thành phần trang (page component) duy nhất. Khi bạn điều hướng đến một route khác, toàn bộ trang sẽ được render lại. Parallel Routes phá vỡ mô hình này bằng cách cho phép bạn render nhiều thành phần đồng thời trong cùng một bố cục, mỗi thành phần được quản lý bởi một phân đoạn route độc lập riêng. Hãy tưởng tượng nó giống như việc chia trang của bạn thành các phần riêng biệt, mỗi phần có URL và vòng đời riêng, tất cả cùng tồn tại trên một màn hình duy nhất.

Điều này mở ra nhiều khả năng để tạo ra các giao diện người dùng phức tạp và động hơn. Ví dụ, bạn có thể sử dụng parallel routes để:

Hiển thị một thanh điều hướng cố định bên cạnh nội dung chính.
Triển khai các cửa sổ modal hoặc thanh bên mà không ảnh hưởng đến luồng trang chính.
Tạo các bảng điều khiển (dashboard) với các widget độc lập có thể được tải và cập nhật riêng biệt.
Thử nghiệm A/B các phiên bản khác nhau của một thành phần mà không ảnh hưởng đến cấu trúc tổng thể của trang.

Hiểu về Khái niệm: Slots

Khái niệm cốt lõi đằng sau Parallel Routes là "slots". Một slot là một khu vực được đặt tên trong bố cục của bạn, nơi một phân đoạn route cụ thể được render. Bạn định nghĩa các slot này trong thư mục app của mình bằng cách sử dụng ký hiệu @ theo sau là tên slot. Ví dụ, @sidebar đại diện cho một slot tên là "sidebar".

Mỗi slot sau đó có thể được liên kết với một phân đoạn route. Khi người dùng điều hướng đến một route cụ thể, Next.js sẽ render thành phần được liên kết với phân đoạn route đó vào slot tương ứng trong bố cục.

Triển khai: Một Ví dụ Thực tế

Hãy minh họa cách Parallel Routes hoạt động với một ví dụ thực tế. Tưởng tượng bạn đang xây dựng một ứng dụng thương mại điện tử và bạn muốn hiển thị trang chi tiết sản phẩm với một thanh bên giỏ hàng cố định.

1. Cấu trúc thư mục

Đầu tiên, hãy xác định cấu trúc thư mục cho ứng dụng của chúng ta:

app/
  product/
    [id]/
      @cart/
        page.js  // Thành phần giỏ hàng
      page.js      // Thành phần chi tiết sản phẩm
    layout.js   // Bố cục sản phẩm
  layout.js     // Bố cục gốc

Đây là ý nghĩa của mỗi tệp:

app/layout.js: Bố cục gốc cho toàn bộ ứng dụng.
app/product/[id]/layout.js: Một bố cục dành riêng cho trang chi tiết sản phẩm. Đây là nơi chúng ta sẽ định nghĩa các slot của mình.
app/product/[id]/page.js: Thành phần chi tiết sản phẩm chính.
app/product/[id]/@cart/page.js: Thành phần giỏ hàng, sẽ được render trong slot @cart.

2. Bố cục gốc (app/layout.js)

Bố cục gốc thường chứa các yếu tố được chia sẻ trên toàn bộ ứng dụng, chẳng hạn như header và footer.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        Ứng dụng E-commerce của tôi
        {children}
        © 2024
      
    
  );
}

3. Bố cục Sản phẩm (app/product/[id]/layout.js)

Đây là phần quan trọng nơi chúng ta định nghĩa các slot của mình. Chúng ta nhận các thành phần cho trang sản phẩm chính và giỏ hàng dưới dạng props, tương ứng với page.js và @cart/page.js.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    
      {children}
      {cart}
    
  );
}

Trong ví dụ này, chúng ta đang sử dụng một bố cục flexbox đơn giản để định vị nội dung sản phẩm chính và thanh bên giỏ hàng cạnh nhau. Prop children sẽ chứa đầu ra được render của app/product/[id]/page.js, và prop cart sẽ chứa đầu ra được render của app/product/[id]/@cart/page.js.

4. Trang Chi tiết Sản phẩm (app/product/[id]/page.js)

Đây là một trang route động tiêu chuẩn hiển thị chi tiết sản phẩm dựa trên tham số id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Lấy dữ liệu sản phẩm dựa trên ID
  const product = await fetchProduct(id);

  return (
    
      Chi tiết Sản phẩm
      {product.name}
      {product.description}
      Giá: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Thay thế bằng logic lấy dữ liệu thực tế của bạn
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Sản phẩm ${id}`, description: `Mô tả của Sản phẩm ${id}`, price: 99.99 });
  }, 500));
}

5. Thành phần Giỏ hàng (app/product/[id]/@cart/page.js)

Thành phần này đại diện cho giỏ hàng, sẽ được render trong slot @cart.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    
      Giỏ hàng
      Số lượng sản phẩm: 3
      
    
  );
}

Giải thích

Khi người dùng điều hướng đến /product/123, Next.js sẽ:

Render bố cục gốc (app/layout.js).
Render bố cục sản phẩm (app/product/[id]/layout.js).
Trong bố cục sản phẩm, render thành phần chi tiết sản phẩm (app/product/[id]/page.js) vào prop children.
Đồng thời, render thành phần giỏ hàng (app/product/[id]/@cart/page.js) vào prop cart.

Kết quả là một trang chi tiết sản phẩm với một thanh bên giỏ hàng cố định, tất cả được render trong một bố cục duy nhất.

Lợi ích của việc sử dụng Parallel Routes

Cải thiện Trải nghiệm người dùng: Tạo ra các giao diện người dùng tương tác và hấp dẫn hơn với các yếu tố cố định và các phần động.
Tăng khả năng tái sử dụng mã: Chia sẻ các thành phần và bố cục trên các route khác nhau dễ dàng hơn.
Nâng cao hiệu suất: Tải và cập nhật các phần của trang một cách độc lập, giảm nhu cầu render lại toàn bộ trang.
Đơn giản hóa việc phát triển: Quản lý các bố cục và tương tác phức tạp với một cấu trúc module và có tổ chức hơn.
Khả năng thử nghiệm A/B: Dễ dàng kiểm tra các biến thể khác nhau của các phần cụ thể trên trang mà không ảnh hưởng đến toàn bộ trang.

Những điều cần cân nhắc và các phương pháp hay nhất

Xung đột Route: Cẩn thận để tránh xung đột route giữa các parallel routes. Mỗi phân đoạn route nên có một mục đích duy nhất và không chồng chéo với các phân đoạn khác.
Độ phức tạp của Bố cục: Mặc dù parallel routes mang lại sự linh hoạt, việc sử dụng quá nhiều có thể dẫn đến các bố cục phức tạp khó bảo trì. Hãy cố gắng cân bằng giữa sự linh hoạt và sự đơn giản.
Tác động đến SEO: Cân nhắc các tác động đến SEO khi sử dụng parallel routes, đặc biệt nếu nội dung trong các slot khác nhau có sự khác biệt đáng kể. Đảm bảo rằng các công cụ tìm kiếm có thể thu thập và lập chỉ mục nội dung một cách chính xác. Sử dụng URL chính tắc (canonical URL) một cách hợp lý.
Lấy dữ liệu (Data Fetching): Quản lý việc lấy dữ liệu một cách cẩn thận, đặc biệt khi xử lý nhiều phần độc lập. Cân nhắc sử dụng các kho dữ liệu chia sẻ hoặc cơ chế bộ nhớ đệm để tránh các yêu cầu dư thừa.
Khả năng tiếp cận (Accessibility): Đảm bảo rằng việc triển khai parallel route của bạn có thể tiếp cận được với tất cả người dùng, bao gồm cả những người khuyết tật. Sử dụng các thuộc tính ARIA và HTML ngữ nghĩa phù hợp để cung cấp trải nghiệm người dùng tốt.

Sử dụng Nâng cao: Render có điều kiện và Slot động

Parallel routes không chỉ giới hạn ở việc định nghĩa slot tĩnh. Bạn cũng có thể sử dụng render có điều kiện và slot động để tạo ra các bố cục linh hoạt hơn nữa.

Render có điều kiện

Bạn có thể render có điều kiện các thành phần khác nhau trong một slot dựa trên vai trò người dùng, trạng thái xác thực hoặc các yếu tố khác.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    
      {children}
      
        {userRole === 'admin' ?  : cart}
      
    
  );
}

function AdminPanel() {
  return (
    
      Bảng quản trị
      Quản lý chi tiết sản phẩm tại đây.
    
  );
}

Trong ví dụ này, nếu người dùng có vai trò 'admin', một thành phần AdminPanel sẽ được render trong slot @cart thay vì giỏ hàng.

Slot động

Mặc dù ít phổ biến hơn, về mặt lý thuyết bạn *có thể* xây dựng tên slot một cách động, nhưng điều này thường không được khuyến khích do sự phức tạp và các tác động tiềm tàng đến hiệu suất. Tốt hơn là nên tuân thủ các slot được xác định trước và dễ hiểu. Nếu nhu cầu về "slot" động phát sinh, hãy xem xét các giải pháp thay thế như sử dụng các thành phần React tiêu chuẩn với props và render có điều kiện.

Ví dụ thực tế và các trường hợp sử dụng

Hãy khám phá một số ví dụ thực tế về cách parallel routes có thể được sử dụng trong các loại ứng dụng khác nhau:

Nền tảng thương mại điện tử: Hiển thị giỏ hàng, sản phẩm đề xuất, hoặc thông tin tài khoản người dùng bên cạnh trang chi tiết sản phẩm hoặc trang danh mục.
Bảng điều khiển (Dashboards): Tạo các bảng điều khiển với các widget độc lập để hiển thị số liệu, biểu đồ và báo cáo. Mỗi widget có thể được tải và cập nhật riêng biệt mà không ảnh hưởng đến toàn bộ bảng điều khiển. Một bảng điều khiển bán hàng có thể hiển thị dữ liệu địa lý trong một parallel route, và hiệu suất sản phẩm trong một route khác, cho phép người dùng tùy chỉnh những gì họ thấy mà không cần tải lại toàn bộ trang.
Ứng dụng mạng xã hội: Hiển thị thanh bên trò chuyện hoặc bảng thông báo bên cạnh bảng tin chính hoặc trang hồ sơ.
Hệ thống quản lý nội dung (CMS): Cung cấp một khung xem trước hoặc các công cụ chỉnh sửa bên cạnh nội dung đang được chỉnh sửa. Một parallel route có thể hiển thị bản xem trước trực tiếp của bài viết đang được viết, cập nhật theo thời gian thực khi có thay đổi.
Nền tảng học tập: Hiển thị tài liệu khóa học bên cạnh các tính năng theo dõi tiến độ hoặc tương tác xã hội.
Ứng dụng tài chính: Hiển thị giá cổ phiếu hoặc tóm tắt danh mục đầu tư theo thời gian thực bên cạnh các bài báo tin tức hoặc phân tích. Hãy tưởng tượng một trang web tin tức tài chính sử dụng parallel routes để hiển thị dữ liệu thị trường trực tiếp bên cạnh các tin tức nóng hổi, cung cấp cho người dùng một cái nhìn toàn diện về bối cảnh tài chính.
Công cụ cộng tác toàn cầu: Cho phép chỉnh sửa đồng thời tài liệu hoặc mã nguồn với các bảng hội nghị truyền hình hoặc trò chuyện cố định. Một nhóm kỹ sư phân tán ở San Francisco, London và Tokyo có thể sử dụng parallel routes để làm việc trên cùng một tài liệu thiết kế trong thời gian thực, với một cuộc gọi video được hiển thị cố định trong một thanh bên, thúc đẩy sự hợp tác liền mạch xuyên múi giờ.

Kết luận

Next.js Parallel Routes là một tính năng mạnh mẽ mở ra một thế giới mới về khả năng xây dựng các ứng dụng web động và linh hoạt. Bằng cách cho phép bạn render nhiều phần độc lập trong cùng một bố cục trang, parallel routes cho phép bạn tạo ra trải nghiệm người dùng hấp dẫn hơn, tăng khả năng tái sử dụng mã và đơn giản hóa quy trình phát triển. Mặc dù điều quan trọng là phải xem xét các sự phức tạp tiềm ẩn và tuân thủ các phương pháp hay nhất, việc thành thạo parallel routes có thể nâng cao đáng kể kỹ năng phát triển Next.js của bạn và cho phép bạn xây dựng các ứng dụng web thực sự sáng tạo.

Khi Next.js tiếp tục phát triển, Parallel Routes chắc chắn sẽ trở thành một công cụ ngày càng quan trọng đối với các nhà phát triển muốn vượt qua các giới hạn của những gì có thể trên web. Hãy thử nghiệm với các khái niệm được nêu trong hướng dẫn này và khám phá cách Parallel Routes có thể thay đổi cách tiếp cận của bạn trong việc xây dựng các ứng dụng web hiện đại.